<template>
  <div>
    <el-select
      v-loading="isLoading"
      :value="select"
      element-loading-spinner="el-icon-loading"
      class="select-application"
      value-key="subscribeId"
      clearable
      filterable
      remote
      :remote-method="handleSearch"
      placeholder="请选择预约游戏"
      @clear="handleSearch('')"
      @change="handleChoose"
    >
      <div
        v-infinite-scroll="load"
        :infinite-scroll-immediate="false"
        :infinite-scroll-delay="500"
        :infinite-scroll-distance="30"
        class="option"
      >
        <el-option
          v-for="item in options"
          :key="item.packageId"
          :label="item.appName"
          :value="item"
        ><el-avatar size="medium" :src="item.icon" class="icon" />
          <span class="option__left">{{ item.appName }}</span>
        </el-option>
      </div>
      <div class="footer-total">
        总计 {{ total }} 条，当前展示 {{ options.length }} 条
        <div v-show="editLoading" class="empty-box">正在加载下一页...</div>
      </div>
      <div slot="empty">
        <div v-if="editLoading" class="empty-box">加载中...</div>
        <div v-else class="empty-box">无匹配数据</div>
      </div>
    </el-select>
  </div>
</template>

<script>
import {
  getSubscribeList,
  getSubscribeDetail
} from 'dependencies/api/subscribe'
import LoadingMixins from 'modules/mixins/section-loading'
import { onlineStatus } from 'dependencies/fields/application'
import { ShelveStatusEnum } from 'dependencies/enums/ShelveStatusEnums'

export default {
  mixins: [LoadingMixins],
  props: {
    value: [Number, String],
    prop: {
      type: String,
      default: ''
    },
    albumProp: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    init: Boolean
  },
  data() {
    return {
      select: {},
      options: [],
      pageIndex: 1,
      pageSize: 30,
      total: 0,
      search: '',
      editLoading: false
    }
  },
  watch: {
    value: {
      handler(val, oldValue) {
        if (val && val !== this.select?.subscribeId) {
          this.select = {
            subscribeId: Number(val),
            appName: this.data[this.albumProp]
          }
          if (!this.data[this.albumProp]) {
            this.handleGetAppDetail()
          } else {
            this.handleSearch(
              this.data[this.albumProp] || this.select.appName,
              true
            )
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    handleChoose(val) {
      this.select = val
    },
    submit() {
      this.$set(this.data, this.prop, this.select.subscribeId)
      this.$set(this.data, this.albumProp, this.select.appName)
    },
    load() {
      if (this.pageIndex < Math.ceil(this.total / this.pageSize)) {
        this.pageIndex += 1
        this.getOptionList()
      }
    },
    handleSearch(title, init) {
      this.pageIndex = 1
      this.total = 0
      this.search = title
      this.options = []
      this.getOptionList(init)
    },
    async getOptionList(init = false) {
      if (this.options.length && this.options.length >= this.total) return
      try {
        this.editLoading = true
        let data = await getSubscribeList({
          query: {
            appName: this.search,
            pageSize: this.pageSize,
            pageIndex: this.pageIndex,
            status: 1,
            [onlineStatus.prop]: ShelveStatusEnum.ON_SHELVES
          }
        })
        if (data.success) {
          data = data.data
          this.total = data.totalCount
          if (data.data.length) {
            this.options = this.options.concat(data.data)
          }
          if (
            init &&
            this.value &&
            !this.options.find(i => i.subscribeId === Number(this.value))
          ) {
            this.$message.warning(
              `当前选择的预约应用: "${this.data[this.albumProp] ||
                this.select.appName}" 不存在或已下架`
            )
            this.select = this.data[this.albumProp] || this.select.appName
          }
        }
      } finally {
        this.editLoading = false
      }
    },
    async handleGetAppDetail() {
      this.loading()
      try {
        const data = await getSubscribeDetail({
          params: {
            subscribeId: this.value
          }
        })
        if (data.success && typeof data.data === 'object') {
          this.$set(this.data, this.albumProp, data.data.appName)
          this.select.appName = data.data.appName
          this.handleSearch(
            this.data[this.albumProp] || this.select.appName,
            true
          )
        }
      } catch (error) {
      } finally {
        this.loaded()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.option {
  .el-select-dropdown__item {
    height: 46px;
    line-height: 46px;
  }
  &__left {
    float: left;
  }
  &__right {
    float: right;
    color: #8492a6;
    font-size: 13px;
  }
  .icon {
    float: left;
    margin-top: 5px;
    margin-right: 10px;
  }
}
.pagin {
  background: #fff;
}
::-webkit-scrollbar {
  width: 10px;
}
.footer-total {
  font-size: 14px;
  text-align: center;
  color: #999;
}
.empty-box {
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>
